<template>
    <uni-popup ref="groupPopupRef" @change="onPopupChange" :mask-click="false">
        <view class="group_popup">
            <view class="header">
                <view class="title">可参与的拼单</view>
                <image
                    class="close_btn"
                    :src="getImgOssUrl('/ui-prod-2.0.0/cancel_1.1.png')"
                    @click="groupPopupRef.close()" />
            </view>
            <scroll-view scroll-y="true" class="scroll_view" @scrolltolower="onScrolltolower">
                <view class="card">
                    <view class="item" v-for="item in state.list" :key="item.id">
                        <view class="avatar">
                            <template v-for="(info, i) in item.offered" :key="`k${i}`">
                                <image
                                    v-if="i < 3"
                                    :style="{ zIndex: 10 - i }"
                                    :src="info.avatar || getImgOssUrl('/ui-prod-2.7.0/avatar.png')" />
                            </template>
                        </view>
                        <view class="name_info">
                            <view class="name_info_name">{{ item.offered[0]?.nickname || '匿名' }}</view>
                            <view v-if="item.offered.length > 1" class="name_info_num"
                                >等<text>{{ item.offeredNum }}</text
                                >人</view
                            >
                        </view>
                        <view class="countdown">
                            <view class="countdown_name">还差{{ item.surplusNum }}人成团</view>
                            <view class="countdown_time"
                                ><countdownVue format="剩余HH小时mm分ss秒" :endTime="getNowTimes(item)" />
                            </view>
                        </view>
                        <view class="to_group_btn" @click="onOpen(item)">去拼单</view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </uni-popup>
</template>

<script setup>
import countdownVue from '@/components/countdown';
import { getImgOssUrl, getTimeStamp } from '@/commons/utils';
import request from '@/request';
import { ref, reactive, watch } from 'vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    goodsId: {
        type: [String, Number]
    },
    activityId: {
        type: [String, Number]
    }
});
const emit = defineEmits(['update:modelValue']);
const groupPopupRef = ref(null);
const state = reactive({
    list: [],
    totalCount: 0,
    update: false
});
const parmas = reactive({
    goodsId: '',
    activityId: '',
    page: 1,
    perPage: 15
});
const getNowTimes = item => {
    let activityEndTime = item.activityEndTime * 1000;
    let groupEndTime = (item.activityStartTime + item.surplusTime) * 1000;
    return groupEndTime < activityEndTime ? groupEndTime : activityEndTime;
};
// 获取拼团列表
const getGroupList = async () => {
    const { data } = await request('getAllGroupListServ', parmas);
    state.list = data.list || [];
    state.totalCount = data.totalCount || 0;
};

// 滚动到底部
const onScrolltolower = () => {
    if (state.list.length < state.totalCount) {
        parmas.page++;
        getGroupList();
    }
};

// 去拼团
const onOpen = item => {
    emit('openGroupSkupop', item);
};

// 打开/关闭弹窗
const onPopupChange = e => {
    if (e.show && !state.list.length) {
        getGroupList();
    }
    if (!e.show) {
        emit('update:modelValue');
    }
};
watch(
    () => props.modelValue,
    v => {
        if (v) {
            parmas.activityId = +props.activityId;
            parmas.goodsId = +props.goodsId;
            request('getAllGroupListServ', parmas)
                .then(res => {
                    state.list = res.data.list || [];
                    state.totalCount = res.data.totalCount || 0;
                    if (state.list.length > 0) {
                        groupPopupRef.value.open();
                    } else {
                        emit('update:modelValue');
                    }
                })
                .catch(err => {
                    emit('update:modelValue');
                });
        }
    }
);
</script>

<style lang="scss" scoped>
.group_popup {
    width: calc(100vw - 50rpx);
    background: #fff;
    border-radius: 24rpx;
    margin-bottom: 10%;
    .header {
        padding: 32rpx 32rpx 24rpx;
        border-bottom: 1px solid #f5f5f5;
        .title {
            text-align: center;
            font-size: 32rpx;
            font-weight: 500;
            color: #333333;
        }
        .close_btn {
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            top: 32rpx;
            right: 32rpx;
        }
    }
    .scroll_view {
        max-height: 600rpx;
        .card {
            padding: 0 20rpx;
            .item {
                padding: 20rpx 0;
                border-bottom: 1px solid #f5f5f5;
                display: flex;
                align-items: center;
                font-size: 24rpx;
                color: #333333;
                &:last-child {
                    border-bottom: none;
                }
                .avatar {
                    width: 120rpx;
                    display: flex;
                    flex-wrap: nowrap;
                    overflow: hidden;
                    margin-right: 20rpx;
                    image {
                        width: 60rpx;
                        height: 60rpx;
                        margin-left: -30rpx;
                        border-radius: 50%;
                        &:nth-child(1) {
                            margin-left: 0;
                        }
                    }
                }
                .name_info {
                    flex: 1;
                    display: flex;
                    .name_info_name {
                        max-width: 100rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-break: break-all;
                    }
                    .name_info_num {
                        text {
                            color: #fe292b;
                        }
                    }
                }
                .countdown {
                    margin: 0 20rpx;
                    display: flex;
                    flex-direction: column;
                    .countdown_name {
                        text-align: right;
                    }
                    .countdown_time {
                        font-size: 20rpx;
                        color: #999999;
                    }
                }
                .to_group_btn {
                    width: 132rpx;
                    height: 60rpx;
                    border-radius: 30rpx;
                    line-height: 60rpx;
                    text-align: center;
                    background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
                    color: #fff;
                    font-size: 24rpx;
                }
            }
        }
    }
}
</style>
